<template>
  <div class="page-view">
    <van-checkbox-group
      v-model="selectedResult"
    >
      <van-cell-group class="cell-div">
        <van-cell
          v-for="(item, index) in checkboxList"
          :key="item.Id"
          clickable
          :title="item.Name"
          @click="toggle(index)"
        >
          <van-checkbox
            ref="checkboxes"
            slot="right-icon"
            :checked-color="isApp ? '#4AA3F3' : '#04cabc'"
            :name="item.Id"
          />
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>
    <van-field
      v-model="correctionContent"
      rows="4"
      autosize
      class="textarea"
      type="textarea"
      maxlength="200"
      placeholder="请输入纠错内容"
      show-word-limit
      @blur="onBlurContent"
    />
    <div class="btn-div">
      <van-button
        type="primary"
        class="submit-btn"
        :disabled="btnDisabled"
        @click="onSubmit"
      >
        提交
      </van-button>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { AppInfo } from 'lib/appMethods'
import { SET_USER_INFO } from '@/store/mutations'
import { HTTP_CODES } from '@/plugins/http.plugin'
import { isiOS } from '@/lib/utils'
import { CellGroup, CheckboxGroup, Field } from 'vant'
export default Vue.extend({
  components: {
    'van-checkbox-group': CheckboxGroup,
    'van-cell-group': CellGroup,
    'van-field': Field,
  },
  data () {
    return {
      isApp: AppInfo.isApp,
      selectedResult: [] as any,
      correctionContent: '',
      checkboxList: [],
      btnDisabled: false,
    }
  },
  created () {
    this.getQuestionCorrectionType()
  },
  methods: {
    toggle (index: number) {
      (this.$refs.checkboxes as any)[index].toggle()
    },

    getQuestionCorrectionType () {
      this.btnDisabled = false
      this.$axios({
        method: 'get',
        url: 'exam/questionCorrectionType',
      }, 0, () => {
        this.getQuestionCorrectionType()
      }).then(res => {
        this.checkboxList = res
      })
    },
    // 解决iOS键盘收起以后页面不归位的问题
    onBlurContent () {
      if (isiOS) {
        setTimeout(() => {
          let scrollHeight = document.documentElement!.scrollTop || document.body.scrollTop || 0
          window.scrollTo(0, Math.max(scrollHeight - 1, 0))
        }, 100)
      }
    },

    onSubmit () {
      if (this.selectedResult.length <= 0 && this.correctionContent === '') {
        this.$toast('请选择或输入纠错内容！')
        return
      }
      this.btnDisabled = true
      this.$axios({
        method: 'post',
        url: 'exam/QuestionCorrection',
        data: {
          ...this.$route.query,
          correctionContent: this.correctionContent,
          questionCorrectionTypeIds: this.selectedResult,
        },
      }, 0, () => {
        this.onSubmit()
      }).then(res => {
        this.$toast({
          message: '提交成功',
        })
        this.btnDisabled = false
        this.$router.back()
      })
    },
  },
})
</script>

<style lang="scss" scoped>
.page-view {
  min-height: 100%;
  background: #fff;
}
.textarea {
  border-top: 14px solid #f4f4f4;
  border-bottom: 1px solid #E9E9E9;
  font-size: 30px;
}
.btn-div {
  margin-top: 80px;
  text-align: center;
}
.submit-btn {
  width: 538px;
  height: 86px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 85px;
  font-size: 32px;
  color: #fff;
  background-color: #03C9BB;
  border-radius: 3px;
}
.cell-div {
  /deep/ {
    .van-cell:not(:last-child):after {
      @include px1border(top, #E9E9E9);
    }
    .van-cell {
      font-size: 30px;
      line-height: 0.74rem;
    }
  }
}
</style>
